<template>
  <div class="signature-pad-wrapper">
    <div class="signature-container" v-if="!signShow && !isSign">
      <div class="button-group-rotated">
        <!-- Show clear/submit buttons only if not submitted -->
        <template v-if="!isSubmitted">
          <button @click="clearCanvas" class="btn btn-clear">
            <!-- 拆分字符为单独span -->
            <span v-for="(char, index) in '清除签名'" :key="index">{{
              char
            }}</span>
          </button>
          <button @click="openSaveConfirmation" class="btn btn-save">
            <span v-for="(char, index) in '提交签名'" :key="index">{{
              char
            }}</span>
          </button>
        </template>
        <!-- Show submitted button if submitted -->
        <button v-else class="btn btn-submitted" disabled>
          <span v-for="(char, index) in '已提交'" :key="index">{{ char }}</span>
        </button>
      </div>
      <canvas
        ref="signatureCanvas"
        class="signature-canvas"
        id="signatureCanvas"
        @mousedown="startDrawing"
        @mousemove="draw"
        @mouseup="stopDrawing"
        @mouseout="stopDrawing"
        @touchstart.prevent="startDrawing"
        @touchmove.prevent="draw"
        @touchend.prevent="stopDrawing"
      ></canvas>
      <div class="title-rotated">
        <span v-for="(char, index) in title" :key="index">{{ char }}</span>
      </div>
    </div>
    <!-- 批量签字弹窗 -->
    <el-dialog
      title=""
      :center="true"
      :show-close="false"
      :visible.sync="signShow"
      width="100%"
      append-to-body
      fullscreen
      :close-on-click-modal="false"
    >
      <div class="dialogTitle">批量签字</div>
      <div
        v-if="noSign"
        style="display: flex; justify-content: center; font-size: 20px"
      >
        <span>当前没有可签名学员或已签署过了</span>
      </div>
      <div class="body" v-if="!noSign">
        <p style="font-size: 16px; text-indent: 2em; line-height: 30px">
          {{ userName }}老师您好，当前有
          <span class="systemColor">{{ registerIds.length }} 位</span
          >学员的行风承诺书未签字，确定签署吗？
        </p>
        <div
          style="
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            font-size: 16px;
          "
        >
          <div style="display: flex; z-index: 2; justify-content: center">
            <div>
              签名样式：<!-- 修改这一行 -->
              <span
                v-if="userSign == ''"
                class="signature"
                @click="handleSetSignature"
                >点击设置签名样式</span
              >
            </div>
            <i
              class="el-icon-edit"
              v-if="userSign != ''"
              style="margin-left: 120px; font-size: 20px; cursor: pointer"
              @click="handleSetSignature"
            ></i>
          </div>
          <div
            style="
              z-index: 1;
              text-align: center;
              display: flex;
              margin-top: -25px;
              box-sizing: border-box;
              justify-content: center;
            "
          >
            <img :src="userSign" style="width: 90px" v-if="userSign" alt="" />
          </div>
        </div>
      </div>
      <div slot="footer" v-if="!noSign" class="dialog-footer">
        <!-- <el-button @click="closeSignDialog" v-if="!isSign">取 消</el-button> -->
        <el-button
          v-if="!isSign"
          type="primary"
          @click="confirmDialogVisible = true"
          :disabled="!userSign"
          >确 认</el-button
        >
        <el-button v-if="isSign" :disabled="!isSign" type="info"
          >已签字</el-button
        >
      </div>
    </el-dialog>
    <div v-if="isModalVisible" class="modal" @click.self="closeModal">
      <div class="modal-content">
        <!-- 旋转标题 -->
        <div class="modal-title-rotated">
          <span
            v-for="(char, index) in '确定提交吗，提交后将不可更改。'"
            :key="index"
            >{{ char }}</span
          >
        </div>
        <img
          v-if="signatureDataURL"
          :src="signatureDataURL"
          class="modal-signature-preview"
          alt="签名确认预览"
        />
        <div class="modal-buttons">
          <!-- 旋转按钮文字 -->
          <button @click="closeModal" class="modal-btn modal-btn-cancel">
            <span v-for="(char, index) in '取消'" :key="index">{{ char }}</span>
          </button>
          <button @click="confirmAndSave" class="modal-btn modal-btn-confirm">
            <span v-for="(char, index) in '确认'" :key="index">{{ char }}</span>
          </button>
        </div>
      </div>
    </div>
    <!-- 支付弹框 -->
    <el-dialog
      title="提示"
      :visible.sync="confirmDialogVisible"
      width="265px"
      append-to-body
      center
      :close-on-click-modal="false"
    >
      <div style="display: flex; align-items: center; text-indent: 2em">
        {{ userName }}老师您好，确定给{{
          registerIds.length
        }}名学员签署行风承诺书吗？
      </div>

      <div slot="footer" style="text-align: center">
        <el-button
          @click="confirmDialogVisible = false"
          style="color: #ffffff; background-color: #aeb0b2"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click="
            confirmDialogVisible = false;
            signSubmit();
          "
          style="background-color: #1e98d7; border-color: #1e98d7"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addKXBatchSign,
  addOrUpdate,
  addSignBook,
  getUserSign,
  getUserSignStatus,
} from "@/api/business/registerInfo";
export default {
  name: "SignaturePad",
  props: {
    title: {
      type: String,
      default: "请在下方签名",
    },
    lineWidth: {
      type: Number,
      default: 3,
    },
    strokeColor: {
      type: String,
      default: "#000000",
    },
    backgroundColor: {
      type: String,
      // Removed default background color, will be transparent
      // default: "#ffffff",
    },
  },
  data() {
    return {
      canvas: null,
      ctx: null,
      isDrawing: false,
      lastX: 0,
      lastY: 0,
      signatureDataURL: null, // Temporary URL for modal preview
      confirmedSignatureData: null, // Final saved signature URL
      isModalVisible: false,
      // canvasWidth: 300, // Initial default, will be resized - Now dynamically set
      // canvasHeight: 300, // Fixed height - Now dynamically set
      canvasWidth: 0, // Initialize with 0, will be set in resizeCanvas
      canvasHeight: 0, // Initialize with 0, will be set in resizeCanvas
      guid: "",
      studentRole: "",
      userName: "",
      expireUuid: "",
      type: "", //类型
      userId: "",
      userSign: "", //预签名
      signShow: false, //批量签字弹框
      registerIds: [],
      isSign: false, //签字是否成功
      isSubmitted: false, // 新增状态，标记是否已提交
      hasDrawn: false, // 新增状态，标记是否已绘制内容
      status: false,
      noSign: false,
      zt: "",
      confirmDialogVisible: false,
    };
  },
  created() {
    const decodedUrl = decodeURIComponent(this.$route.fullPath);
    const urlParams = new URLSearchParams(decodedUrl.split("?")[1]);

    this.guid = urlParams.get("guid");
    this.studentRole = urlParams.get("studentRole");
    this.userName = urlParams.get("userName");
    this.type = urlParams.get("type");
    this.userId = urlParams.get("userId");
    this.expireUuid = urlParams.get("expireUuid");
    this.zt = urlParams.get("zt");
    console.log(this.expireUuid);
    // Handle potential null or empty registerIds before splitting
    const registerIdsParam = urlParams.get("registerIds");
    this.registerIds = registerIdsParam ? registerIdsParam.split(",") : [];

    console.log(this.userId);

    if (this.userId) {
      if (this.zt === "ys") {
        console.log(this.registerIds);
        return;
      }
      this.registerIds = [];
      getUserSignStatus({ userId: this.userId })
        .then((res) => {
          if (res.code === 200 && res.data.length > 0) {
            this.registerIds = res.data;
            this.getUserSign();
            return;
          }
          this.signShow = true;
          this.noSign = true;
        })
        .catch((error) => {
          console.error("Error fetching user sign status:", error);
          // this.signShow = false;
          // this.noSign = false;
          this.$modal.msgWarning("错误");
        });
    }
  },
  mounted() {
    // Only init canvas if not in batch sign mode initially
    if (!this.signShow) {
      this.init();
    }
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeCanvas);
    // Disconnect ResizeObserver if it exists
    if (this.resizeObserver) {
      this.resizeObserver.disconnect();
    }
    this.canvas = null;
    this.ctx = null;
  },
  methods: {
    getUserSign() {
      getUserSign(this.userId).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.userSign = res.data.userSign;
        }
      });
      this.signShow = true;
    },
    handleSetSignature() {
      if (this.isSign) return;
      this.signShow = false;
      this.type = "sign"; // 设置 type 为 sign
      this.status = true;
      this.$nextTick(() => {
        this.init();
        this.clearCanvas(); // 清除之前的签名
      });
    },
    init() {
      this.$nextTick(() => {
        // Ensure canvas ref exists before proceeding
        if (!this.$refs.signatureCanvas) {
          // console.error("Canvas元素未找到"); // Might log unnecessarily if signShow is true initially
          return;
        }

        this.canvas = this.$refs.signatureCanvas;
        this.ctx = this.canvas.getContext("2d");

        // Clean up previous listener before adding new one
        window.removeEventListener("resize", this.resizeCanvas);
        if (this.resizeObserver) {
          this.resizeObserver.disconnect();
        }

        if (!window.ResizeObserver) {
          // 兼容性处理
          window.addEventListener("resize", this.resizeCanvas);
        } else {
          // Use ResizeObserver if available for better performance
          const resizeObserver = new ResizeObserver(() => this.resizeCanvas());
          // Observe the parent element for size changes
          if (this.canvas.parentElement) {
            resizeObserver.observe(this.canvas.parentElement);
          }
          // Store observer to disconnect later if needed
          this.resizeObserver = resizeObserver;
        }

        this.resizeCanvas();

        // 重置确认状态
        this.confirmedSignatureData = null;
        this.signatureDataURL = null;
        this.isSubmitted = false; // Reset submitted state on init
      });
    },
    signSubmit() {
      let data = {
        userName: this.userName,
        registerIdList: this.registerIds,
        userSignImg: this.userSign,
      };
      if (this.expireUuid) {
        data.expireUuid = this.expireUuid;
      }
      addKXBatchSign(data).then((res) => {
        this.$modal.msgSuccess(
          `已成功给${this.registerIds.length}位学员签字。`
        );
        // this.signShow = false; // Keep dialog open to show '已签字'
        this.isSign = true;
      });
    },
    closeSignDialog() {
      this.signShow = false;
      this.userSign = ""; // 清除预签名状态
      // No need to init canvas here if closing batch sign dialog
      // this.$nextTick(this.init);
    },
    initializeCanvas() {
      if (!this.canvas || !this.ctx) return;
      // Ensure dimensions are positive before setting
      this.canvas.width = this.canvasWidth > 0 ? this.canvasWidth : 300; // Fallback width
      this.canvas.height = this.canvasHeight > 0 ? this.canvasHeight : 400; // Increased fallback height

      this.ctx.strokeStyle = this.strokeColor;
      this.ctx.lineWidth = this.lineWidth;
      this.ctx.lineJoin = "round";
      this.ctx.lineCap = "round";
      // Remove background fill for transparency
      // this.ctx.fillStyle = this.backgroundColor;
      // this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); // Clear with transparency
    },
    resizeCanvas() {
      if (!this.canvas || !this.canvas.parentElement) return;

      // Preserve content before resize if needed (specifically the confirmed signature)
      const existingConfirmedData = this.confirmedSignatureData;

      // 横屏模式下的画布尺寸计算
      const container = this.canvas.parentElement;
      const containerWidth = container.clientWidth;
      const containerHeight = container.clientHeight;

      // 计算可用空间 (减去按钮组宽度和间距)
      const availableWidth = containerWidth - 140; // 120px按钮组 + 20px间距
      const availableHeight = containerHeight - 60; // 标题高度和边距

      // 横屏模式下画布宽度大于高度
      this.canvasWidth = Math.min(availableWidth, 600); // 最大600px宽度
      this.canvasHeight = Math.min(this.canvasWidth * 0.8, availableHeight); // Increased height ratio

      // 在小屏幕下自动调整
      if (window.innerWidth < 768) {
        this.canvasWidth = Math.min(containerWidth - 40, 500); // 减去边距
        this.canvasHeight = this.canvasWidth * 0.9; // Increased height ratio for mobile
      }

      console.log(
        `Resized Canvas to: ${this.canvasWidth} x ${this.canvasHeight}`
      );

      this.initializeCanvas(); // Re-init clears and sets background/transparency

      // If there was a confirmed signature, redraw it scaled onto the new canvas size
      if (existingConfirmedData) {
        this.redrawConfirmedSignature(existingConfirmedData);
      }
    },

    redrawConfirmedSignature(dataUrl) {
      if (!this.ctx || !dataUrl) return;
      const img = new Image();
      img.onload = () => {
        // Clear with transparency before redrawing
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

        // Calculate the scaling ratio to fit the image within the canvas
        const hRatio = this.canvas.width / img.width;
        const vRatio = this.canvas.height / img.height;
        const ratio = Math.min(hRatio, vRatio, 1); // Don't scale up beyond original size implicitly, adjust if needed
        const centerShiftX = (this.canvas.width - img.width * ratio) / 2;
        const centerShiftY = (this.canvas.height - img.height * ratio) / 2;

        // Draw the image centered and scaled
        this.ctx.drawImage(
          img,
          0,
          0,
          img.width,
          img.height, // Source rectangle
          centerShiftX,
          centerShiftY,
          img.width * ratio,
          img.height * ratio // Destination rectangle
        );
      };
      img.onerror = (err) => {
        console.error("Error loading image for redraw:", err);
      };
      img.src = dataUrl;
    },

    getPosition(event) {
      const rect = this.canvas.getBoundingClientRect();
      let clientX, clientY;

      if (event.type.includes("touch")) {
        // Ensure touches array is not empty
        if (!event.touches || event.touches.length === 0)
          return [this.lastX, this.lastY]; // Return last known position or default
        const touch = event.touches[0] || event.changedTouches[0];
        clientX = touch.clientX;
        clientY = touch.clientY;
      } else {
        clientX = event.clientX;
        clientY = event.clientY;
      }

      const scaleX = this.canvas.width / rect.width;
      const scaleY = this.canvas.height / rect.height;
      const x = (clientX - rect.left) * scaleX;
      const y = (clientY - rect.top) * scaleY;

      return [x, y];
    },

    startDrawing(event) {
      // Prevent drawing if already submitted
      if (this.isSubmitted) return;
      this.isDrawing = true;
      [this.lastX, this.lastY] = this.getPosition(event);
    },

    draw(event) {
      // Prevent drawing if already submitted or not drawing
      if (!this.isDrawing || this.isSubmitted) return;
      const [x, y] = this.getPosition(event);
      this.ctx.beginPath();
      this.ctx.moveTo(this.lastX, this.lastY);
      this.ctx.lineTo(x, y);
      this.ctx.stroke();
      [this.lastX, this.lastY] = [x, y];
      this.hasDrawn = true; // Mark that drawing has occurred
    },

    stopDrawing() {
      if (!this.isDrawing) return;
      this.isDrawing = false;
      this.ctx.beginPath(); // Reset the path to prevent connecting future lines
    },

    clearCanvas() {
      // Prevent clearing if already submitted
      if (this.isSubmitted) return;
      if (!this.ctx) return;
      // Clear with transparency instead of filling with background color
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
      this.signatureDataURL = null;
      this.confirmedSignatureData = null;
      this.hasDrawn = false; // Reset drawing flag
      // Optionally emit an event
      this.$emit("cleared");
    },

    isCanvasBlank() {
      // Check if anything has been drawn instead of comparing data URLs
      return !this.hasDrawn;
    },

    openSaveConfirmation() {
      // Prevent opening confirmation if already submitted
      if (this.isSubmitted) return;
      if (this.isCanvasBlank()) {
        // Use ElMessage for consistency if available, otherwise fallback to alert
        this.$message
          ? this.$message.warning("请先签名再保存")
          : alert("请先签名再保存");
        return;
      }
      // 实时获取签字区域的宽高

      const { width, height } = signatureCanvas.getBoundingClientRect();
      console.log({ width, height });
      const canvasWidth = width;
      const canvasHeight = height;
      // 创建一个新的canvas元素用于调整图片大小
      const tempCanvas = document.createElement("canvas");
      const tempCtx = tempCanvas.getContext("2d");
      tempCanvas.width = canvasWidth;
      tempCanvas.height = canvasHeight;
      // 将签名绘制到临时canvas上
      tempCtx.drawImage(this.canvas, 0, 0, canvasWidth, canvasHeight);
      // 获取调整大小后的图片数据URL
      this.signatureDataURL = tempCanvas.toDataURL("image/png");
      this.isModalVisible = true;
    },

    confirmAndSave() {
      if (!this.signatureDataURL || this.isSubmitted) return; // Prevent saving if no data or already submitted

      // Create a temporary canvas for rotation
      const tempCanvas = document.createElement("canvas");
      const tempCtx = tempCanvas.getContext("2d");
      const img = new Image();

      img.onload = () => {
        // Set canvas dimensions based on rotated image
        tempCanvas.width = img.height;
        tempCanvas.height = img.width;

        // Translate context to center, rotate, then translate back
        tempCtx.translate(tempCanvas.width / 2, tempCanvas.height / 2);
        tempCtx.rotate(-Math.PI / 2); // Rotate -90 degrees (counter-clockwise)
        tempCtx.drawImage(img, -img.width / 2, -img.height / 2);

        // Get the rotated image data URL
        const rotatedSignatureDataURL = tempCanvas.toDataURL("image/png");

        // Handle teacher pre-signing (type === 'sign')
        if (this.type == "sign") {
          // Directly save pre-sign via API using rotated image
          addOrUpdate({
            userSign: rotatedSignatureDataURL, // Use the rotated canvas data
            userId: this.userId,
          })
            .then((res) => {
              if (res.code === 200) {
                this.$message.success(res.msg || "预设签名保存成功");
                this.confirmedSignatureData = this.signatureDataURL; // Store original for potential redraw
                this.isSubmitted = true; // Mark as submitted
                this.closeModal();
                if (this.status) {
                  this.getUserSign();
                }
              } else {
                this.$message.error(res.msg || "预设签名保存失败");
              }
            })
            .catch((err) => {
              this.$message.error("保存预设签名时出错");
              console.error(err);
            });
          return; // Exit after handling teacher pre-sign
        }

        // Handle student signing (else block)
        this.confirmedSignatureData = this.signatureDataURL; // Store original for potential redraw

        this.closeModal();

        // Call API to save student signature using rotated image
        let data = {
          userSignImg: rotatedSignatureDataURL, // Use the rotated data
          guid: this.guid,
          studentRole: this.studentRole,
          userName: this.userName,
        };
        if (this.expireUuid) {
          data.expireUuid = this.expireUuid;
        }
        addSignBook(data)
          .then((res) => {
            if (res.code === 200) {
              this.$message.success(res.msg || "签名提交成功");
              this.isSubmitted = true; // Set submitted state to true on success
            } else {
              this.$message.error(res.msg || "签名提交失败");
              // Optionally reset confirmed data if save fails?
              // this.confirmedSignatureData = null;
            }
          })
          .catch((err) => {
            this.$message.error("提交签名时出错");
            console.error(err);
            // Optionally reset confirmed data on error?
            // this.confirmedSignatureData = null;
          });
      };

      img.onerror = (err) => {
        console.error("Error loading image for rotation:", err);
        this.$message.error("加载签名图片失败，无法旋转。");
      };

      // Load the original signature into the Image object
      img.src = this.signatureDataURL;
    },

    closeModal() {
      this.isModalVisible = false;
      // Keep signatureDataURL if needed for redraw on resize, clear only if truly cancelling
      // this.signatureDataURL = null; // Clear temporary URL only if necessary
    },
  },
};
</script>

<style scoped>
/* 横屏布局样式 */
.signature-pad-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  padding: 10px;
  box-sizing: border-box;
  background-color: #f5f5f5;
}

.signature-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  max-width: 800px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 10px;
}

.signature-title {
  font-size: 18px;
  color: #333;
  margin-bottom: 15px;
  text-align: center;
}

.signature-canvas {
  border: 1px solid #ddd;
  touch-action: none;
  width: 70vw;
  height: 90vh; /* Increased height */
  min-width: 250px;
  min-height: 300px; /* Increased min-height */
  display: block;
  cursor: crosshair;
  margin: 0 10px;
}

.button-group-rotated {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 40px;
}

.button-group-rotated > .btn {
  width: 100%;
}

/* Ensure single submitted button takes full width */
.button-group-rotated > .btn-submitted {
  flex-grow: 1; /* Allows the single button to take available space */
  justify-content: center; /* Center text if needed */
}

.btn {
  padding: 20px 11px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.btn span {
  transform: rotate(90deg) !important;
}
.btn-clear {
  background-color: #9da3a7;
  color: white;
}

.btn-save {
  background-color: #1e98d7;
  color: white;
}

.btn:hover:not(:disabled) {
  /* Prevent hover effect on disabled */
  opacity: 0.9;
}

.btn-submitted {
  background-color: #909399; /* Element UI Info color */
  color: white;
  cursor: not-allowed;
}

.signature-preview {
  margin-top: 20px;
  max-width: 100%;
  border: 1px solid #eee;
}

/* Modal Styles */
.modal {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  border-radius: 8px;
  width: 80%;
  max-width: 500px;
  height: 70%;
  text-align: center;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: space-around;
}

.modal-title {
  font-size: 20px;
  margin-bottom: 15px;
  color: #333;
}

.modal-signature-preview {
  border: 1px solid #ccc;
  width: 160px;
}

.modal-btn-confirm {
  background-color: #1e98d7;
  color: white;
}

.modal-btn-cancel {
  background-color: #9da3a7;
  color: white;
}

.modal-btn:hover {
  opacity: 0.9;
}
/* Modal 标题旋转样式 */
.modal-title-rotated {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.modal-title-rotated span {
  transform: rotate(90deg);
  white-space: nowrap;
  font-size: 16px;
  color: #333;
}

/* Modal 按钮样式调整 */
.modal-buttons {
  display: flex;
  flex-direction: column; /* 按钮水平排列 */
  gap: 20px;
  justify-content: center;
}

.modal-btn {
  padding: 0; /* 清除默认内边距 */
  width: 40px; /* 固定按钮宽度 */
  height: 120px; /* 增加高度适应垂直文字 */
  flex-direction: column; /* 文字垂直排列 */
  justify-content: center;
  align-items: center;
  border: none;
  display: flex;
  flex-direction: column;
}

.modal-btn span {
  transform: rotate(90deg);
  font-size: 14px;
  white-space: nowrap;
}

/* 响应式调整 */
/* @media (max-width: 768px) {
  .signature-container {
    flex-direction: column;
    padding: 15px;
  }

  .signature-canvas {
    width: 100%;
    margin: 15px 0;
  }

  .button-group-rotated {
    flex-direction: row;
    width: 100%;
    transform: rotate(0deg);
  }

  .title-rotated {
    transform: rotate(0deg);
  }
} */

.title-rotated {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title-rotated span {
  margin: 2px 0;
  transform: rotate(90deg);
}

.signature-container {
  transition: opacity 0.3s;
}

.signature-canvas {
  touch-action: none;
  /* 禁止默认触摸行为 */
}
.signature {
  text-decoration: underline;
  color: #a52529;
}
/* Style for the single submitted button */
.btn-submitted {
  background-color: #909399; /* Element UI Info color */
  color: white;
  cursor: not-allowed;
}
.sign-dialog {
  height: 100vh;
}
.body {
  padding-top: 50px;
}
.dialog-footer {
  margin-top: 50px;
}
.dialogTitle {
  display: flex;
  justify-content: center;
  font-size: 20px;
}
</style>
